<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../css/reset.css">
  <link rel="stylesheet" href="../css/swiper.css">
  <script src="../js/animate.js"></script>
</head>

<body>
  <!-- .wrap>(ul.swiperBar>li*4>img[src='../images/$.jpg'])+ul.dotBar>li*4 -->
  <div class="wrap w">
    <ul class="swiperBar cl">
      <li><img src="../images/1.jpg" alt=""></li>
      <li><img src="../images/2.jpg" alt=""></li>
      <li><img src="../images/3.jpg" alt=""></li>
      <li><img src="../images/4.jpg" alt=""></li>
    </ul>
    <ul class="dotBar">
      <li class="active"></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</body>
<script>
  // 轮播图的书写流程
  // 1.  dot点 和 图片 一一对应 (下标)
  // 2.  怎么移动? 轮播时 移动移动整个父盒子(swiperBar)  => 无缝轮播
  // 3.  移动多少? swiperBar移动的距离是一张图片的倍数 => 具体移动多少也和下标对应


  var wrap = document.querySelector(".wrap");
  var swiperBar = document.querySelector(".swiperBar");
  var liList = document.querySelectorAll(".dotBar li");

  var swiperWidth = wrap.clientWidth;

  var index = 0;  //全局变量  记录轮播的下标
  var timer = null;

  // 点击轮播
  for (let i = 0; i < liList.length; i++) {
    let li = liList[i];
    li.onclick = function () {
      // console.log(this,i);

      for (var j = 0; j < liList.length; j++) {
        liList[j].className = "";
      }
      liList[i].className = "active"

      animate(swiperBar, "left", -swiperWidth * i, "slow");
    }
  }


  // timer = setInterval(function () {
  //   index++;
  //   for (var j = 0; j < liList.length; j++) {
  //     liList[j].className = "";
  //   }
  //   liList[index].className = "active";
  //   animate(swiperBar, "left", -swiperWidth * index, "slow");
  // }, 3000)


</script>

</html>